<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cnchar的例子</title>
		<style type="text/css">
			body{margin: 0;}
		</style>
	</head>
	<body>
		<script src="../libs/minicomps.min.js"></script>
        <script src="../libs/Unify.js"></script>
        <!-- <script src="https://fastly.jsdelivr.net/npm/cnchar-all/cnchar.all.min.js"></script> -->
        <script src="../libs/cnchar.all.min.js"></script>
        <script>
            //教程https://theajack.gitee.io/cnchar/guide/start.html#_3-cnchar-all
            /**
            cnchar:拼音+笔画
            cnchar-poly:多音词
            cnchar-order:笔顺
            cnchar-trad:繁体字
            cnchar-draw:汉字可视化
            cnchar-idiom:成语
            cnchar-xhy:歇后语
            cnchar-radical:偏旁部首
            cnchar-words:组词
            cnchar-explain:释义
            cnchar-voice:语音
            cnchar-random:随机生成
            cnchar-input:输入法
            cnchar-code:编码
            cnchar-name:姓名
            cnchar-info:汉字信息
            */
            const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown,RadioButtonGroup} = mc
			const width = Stage.width;
			const height = Stage.height;
			const panel = new Panel(document.body, 0, 0, width,height);
            let [x,y,w,h,oy]=[30,30,600,250,30];
            function view1(){
                new Label(panel,x,y,'1.在下面输入框输入汉字可转为语音')
                const input=new TextInput(panel,x,y+=oy);
                input.setSize(w);
                new Button(panel,x,y+=oy,'确定',onClick);
                function onClick(e){
                    cnchar.voice.speak(input.text);
                }
            }
            function view2(){
                new Label(panel,x,y+=oy*2,'2.在下面输入框输入汉字可转为拼音')
                var sm=['单音','多音'];
                var group=2;
                var type=sm[0];
                const input=new TextInput(panel,x,y+=oy);
                input.setSize(w);
                const output=new TextInput(panel,x,y+=oy);
                output.setSize(w);
                new Button(panel,x,y+=oy,'确定',onClick);
                for(let i=0;i<sm.length;i++){
                    new RadioButton(panel, x+150+i*80, y+5,group,sm[i],i==0);
                }
                function onClick(e){
                    type=RadioButtonGroup.getValueForGroup(group);
                    if(type==sm[0]){
                        output.text=cnchar.spell(input.text,'low','array','tone')
                    }else{
                        output.text=cnchar.spell(input.text,'low','array','tone','poly')
                    }
                }
            }
            function view3(){
                new Label(panel,x,y+=oy*2,'3.在下面输入框输入汉字可转为笔画数或笔画顺序')
                var sm=['笔画数','笔画顺序'];
                var group=3;
                var type=sm[0];
                const input=new TextInput(panel,x,y+=oy);
                input.setSize(w);
                const output=new TextInput(panel,x,y+=oy);
                output.setSize(w);
                new Button(panel,x,y+=oy,'确定',onClick);
                for(let i=0;i<sm.length;i++){
                    new RadioButton(panel, x+150+i*80, y+5,group,sm[i],i==0);
                }
                function onClick(e){
                    type=RadioButtonGroup.getValueForGroup(group);
                    if(type==sm[0]){
                        output.text=cnchar.stroke(input.text,'array');
                    }else{
                        output.text=cnchar.stroke(input.text,'order', "name");
                        
                    }
                    
                }
            }
            function view4(){
                new Label(panel,x,y+=oy*2,'4.在下面输入框输入参数,可查汉字可拼音查汉字，笔画数查汉字')
                var sm=['通过拼音查','通过笔画数查'];
                var group=4;
                var type=sm[0];
                const input=new TextInput(panel,x,y+=oy);
                input.setSize(w);
                const output=new TextInput(panel,x,y+=oy);
                output.setSize(w);
                new Button(panel,x,y+=oy,'确定',onClick);
                for(let i=0;i<sm.length;i++){
                    new RadioButton(panel, x+150+i*80, y+5,group,sm[i],i==0);
                }
                function onClick(e){
                    type=RadioButtonGroup.getValueForGroup(group);
                    if(type==sm[0]){
                        output.text=cnchar.spellToWord(input.text, 'simple');
                    }else{
                        output.text=cnchar.strokeToWord(Number(input.text), 'simple');
                        
                    }
                    
                }
            }
            function view5(){
                //写字APIhttps://theajack.github.io/cnchar/doc/draw.html#_6-%E6%B5%8B%E9%AA%8C%E6%A8%A1%E5%BC%8F
                new Label(panel,x,y+=oy*2,'5.写字动画')
                const input=new TextInput(panel,x,y+=oy);
                input.setSize(w);
                new Button(panel,x,y+=oy,'确定',onClick);
                var sm=['显示完整','笔顺绘制','动画绘制','手写绘制'];
                var types=[cnchar.draw.TYPE.NORMAL,cnchar.draw.TYPE.STROKE,cnchar.draw.TYPE.ANIMATION,cnchar.draw.TYPE.TEST];
                var group=5;
                for(let i=0;i<sm.length;i++){
                    new RadioButton(panel, x+150+i*80, y+5,group,sm[i],i==0);
                }
                function onClick(e){
                    let index=sm.indexOf(RadioButtonGroup.getValueForGroup(group));
                    cnchar.draw(input.text,{
                        el: '#writeHz',
                        type: types[index],
                    })
                }
            }
            function view6(){
                let [x,y]=[680,30]
                new Label(panel,x,y,'6.成语查寻（使用逗号隔开，中英逗号都可以）')
                const input=new TextInput(panel,x,y+=oy);
                input.setSize(w);
                const output=new TextInput(panel,x,y+=oy);
                output.setSize(w);
                new Button(panel,x,y+=oy,'确定',onClick);
                var sm=['根据首个汉字或拼音找','根据多个汉字找','根据单个或多个笔画数找'];
                var group=6;
                for(let i=0;i<sm.length;i++){
                    new RadioButton(panel, x+120+i*150, y+5,group,sm[i],i==0);
                }
                function onClick(e){
                    let params=Unify.stringToArray(input.text);
                    let index=RadioButtonGroup.getValueForGroup(group);
                    switch(index){
                        case sm[0]:
                            output.text=cnchar.idiom(input.text);
                            break;
                        case sm[1]:
                            output.text=cnchar.idiom(params)
                            break;
                        case sm[2]:
                            params=params.map((item)=>{
                                return Number(item);
                            });
                            output.text=cnchar.idiom(params)
                            break;
                    }
                }
            }
            function view7(){
                let [x,y]=[680,160]
                new Label(panel,x,y,'7.查看偏旁部首功能')
                const input=new TextInput(panel,x,y+=oy);
                input.setSize(w);
                const output=new TextInput(panel,x,y+=oy);
                output.setSize(w);
                new Button(panel,x,y+=oy,'确定',onClick);
                var sm=['查看偏旁部首','查看汉字什么结构','根据偏旁部首查汉字','根据汉字组词'];
                var group=7;
                for(let i=0;i<sm.length;i++){
                    new RadioButton(panel, x+120+i*130, y+5,group,sm[i],i==0);
                }
                function onClick(e){
                    var texts=[];
                    var params=cnchar.radical(input.text,'array');
                    let index=RadioButtonGroup.getValueForGroup(group);
                    switch(index){
                        case sm[0]:
                            params.forEach(e => { texts.push(e.radical) });
                            break;
                        case sm[1]:
                            params.forEach(e => { texts.push(e.struct) });
                            break;
                        case sm[2]:
                            texts=cnchar.radical.radicalToWord(input.text).map(item => item.word);
                            break;
                        case sm[3]:
                        texts=cnchar.words(input.text);
                        break;
                    }
                    output.text=texts;
                }
            }
            view1();view2();view3();view4();view5();view6();view7();

            let div;
            setTimeout(()=>{
                div=document.getElementById('writeHz');
            },200)
        </script>
        <div id='writeHz' style="position: absolute;top:500px;left:650px;">田字格显示位置</div>
    </body>
</html>